<template>
	<view class="content">
		<view class="back">
			<image class="img" src="https://yj.xiesinder.cn/prophet/back/query-results.jpg" mode="scaleToFill"
				lazy-load="true"></image>
		</view>
		<view class="container">
			<!--查询组件-->
			<view class="picker">
				<view class="btn">
					<!--选择按钮-->
					<u-button @click="openShow" type="primary" :icon="icon"
						:text="xqParams[0][defaultIndex].codeName"></u-button>
				</view>
				<u-picker :show="show" :defaultIndex="[defaultIndex]" :columns="xqParams" keyName="codeName"
					@change="changeHandler" @confirm="confirmHandler" @close="closeShow" @cancel="closeShow"
					closeOnClickOverlay="true"></u-picker>
			</view>
			<!--item-->
			<view class="item-container">
				<scroll-view scroll-y style="height: 80%;width: 100%;" @scrolltolower="scrolltolower" :enable-back-to-top="true">
					<block v-for="(item, index) in itemList" :key="index">
						<view class="item">
							<view class="item-title left">{{ item.kcmc }}</view>
							<view class="item-grid">
								<view class="left">
									</br>
									<text>学分：{{ item.xf }}</text></br>
									<text>课程大类：{{ item.kcdlmc }}</text></br>
									<text>考试性质：{{ item.ksxzmc }}</text>
								</view>
								<view class="right">
									</br>
									<text style="color: #a8aa22;">{{ item.cjfsmc }}
										<text style="color: #bfbfbf;">{{'  ' + item.xdfsmc }}</text>
									</text></br>
									<text style="color: #00aa00;font-size: 50rpx;">{{ item.zcj }}</text></br>
									<text style="color: #dc590d;">绩点：{{ item.cjjd }}</text>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!--刷新按钮-->
			<view class="reBtn" hover-class="reBtn-active" @click="reload">
				<view class="bBtn">
					<view class="icon">
						<u-icon name="reload" size="25" color="#fff"></u-icon>
					</view>
				</view>
				<view class="bText">同步课表</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getJwglXqParam,
		getAchievementList,
		synAchievementData
	} from "@/plugins/api/achievement.js"
	export default {
		data() {
			return {
				show: false,
				// 列表数据
				itemList: [],
				// 学期参数，默认值
				xqParams: [
					[{
							code: "202001",
							codeName: "大一(上)"
						},
						{
							code: "202002",
							codeName: "大一(下)"
						},
						{
							code: "202101",
							codeName: "大二(上)"
						},
						{
							code: "202102",
							codeName: "大二(下)"
						},
						{
							code: "202201",
							codeName: "大三(上)"
						},
						{
							code: "202202",
							codeName: "大三(下)(当前学期)"
						},
						{
							code: "202301",
							codeName: "大四(上)"
						},
						{
							code: "202302",
							codeName: "大四(下)"
						}
					]
				],
				// 当前学期
				defaultIndex: 0,
				// 图标控制，默认向上
				icon: 'arrow-down',
				interstitialAd: null // 插屏广告
			}
		},
		onLoad() {
			// 加载插屏广告
			if (this.interstitialAd == null && wx.createInterstitialAd) {
				this.interstitialAd = wx.createInterstitialAd({
					adUnitId: 'adunit-15a610e35a6b6d94'
				})
				this.interstitialAd.onLoad(() => {
					console.log('加载了')
				})
				this.interstitialAd.onError((err) => {
					console.log('加载失败')
				})
				this.interstitialAd.onClose(() => {
					console.log('关闭了')
				})
			}
			// 初始化参数
			getJwglXqParam({
				openId: this.openId
			}).then(res => {
				var arr = new Array();
				arr.push(res.data.data)
				this.xqParams = arr
			})
			// 判断当前学期 数组的some方法，在return true的时候回终结循环，使用forEach的return会跳出整个函数
			this.xqParams[0].some((item, index) => {
				if (item.codeName.indexOf("(当前学期)") != -1) {
					this.defaultIndex = (index == 0 ? 0 : (index - 1))
					return true
				}
			})
		},
		onShow() {
			// 显示广告
			if (this.interstitialAd) {
				this.interstitialAd.show().catch((err) => {
					console.log('err', err)
				})
			}
			let code = this.xqParams[0][this.defaultIndex == 0 ? this.defaultIndex : this.defaultIndex - 1].code
			this.getAchievementData(code)
		},
		// 计算属性
		computed: {
			...mapState('user', ['modalShow', 'loginState', 'openId', 'isJwgl'])
		},
		methods: {
			...mapActions('user', ['openModalAction', 'openIsJwglAction', 'closeIsJwglAction']),
			// 滑动选择参数
			changeHandler(e) {
				this.defaultIndex = e.index
				this.getAchievementData(e.value[0].code)
			},
			// 成绩查询，默认查询上学期
			async getAchievementData(code) {
				await getAchievementList({
					openId: this.openId,
					xnxqdm: code
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.itemList = [] // 先清空
					this.itemList = res.data.data
				}).catch(err => {
					uni.$u.toast(err.data.msg)
				})
			},
			// 确认按钮
			confirmHandler(e) {
				this.defaultIndex = e.indexs[0]
				this.getAchievementData(e.value[0].code)
				// 点击确定按钮需要关闭弹窗
				this.show = false
			},
			// 打开选择器
			openShow() {
				this.show = true
				this.icon = 'arrow-up'
			},
			// 关闭选择器
			closeShow() {
				this.show = false
				this.icon = 'arrow-down'
			},
			// 同步课表
			async reload() {
				// 判断是否有链接正在执行
				if (!this.isJwgl) {
					uni.$u.toast('存在数据正在同步，别着急喔！')
					return;
				}
				await synAchievementData({
					openId: this.openId,
					sign: 'sinder@1021'
				}).then(res => {
					// 异步执行，不会进来这里
				}).catch(err => {
					let that = this
					if (err.data == '') {
						this.openIsJwglAction()
						uni.$u.toast('数据同步中')
						setTimeout(function() {
						  // 这里写要延时执行的代码
						  that.closeIsJwglAction()
						  // 成功跳转
						  let code = that.xqParams[0][that.defaultIndex == 0 ? that.defaultIndex : that.defaultIndex - 1].code
						  that.getAchievementData(code)
						}, 4000); // 4s刷新数据
					} else {
						uni.$u.toast(err.data.msg)
					}
				})
			},
			// 滚动出现
			scrolltolower() {
				// console.log('滚动')
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f8f8f8;
	}

	.content {
		width: 100%;
		height: auto;

		// 背景
		.back {
			width: 100%;
			height: 350rpx;
			position: absolute;
			z-index: 2;

			.img {
				position: absolute;
				z-index: 2;
				width: 100%;
				height: 350rpx;
			}
		}

		// 容器
		.container {
			position: fixed; // 相对于浏览器
			z-index: 3;
			margin-top: 320rpx;
			width: 100%;
			height: 100%;
			background: #ffffff;
			border-radius: 40rpx 40rpx 0 0;
			
			.item-container {
				width: 100%;
				height: 80%;
				margin-top: 3%;
				margin-bottom: 17%;
				.item {
					float: left;
					width: 90%;
					height: 250rpx;
					margin: 30rpx 5% 0 5%;
					background: #4fadff;
					border-radius: 15rpx;
					box-shadow: 0 5rpx 5rpx 0 rgba(73, 192, 255, 0.2), 0 5rpx 5rpx 0 rgba(73, 192, 255, 0.2);
					
					.item-title {
						width: 100%;
						height: 40rpx;
						font-size: 30rpx;
					}
					
					.left {
						float: left;
						width: 100%;
						height: 40rpx;
						color: #fff;
						text-align: left;
						text-indent: 25rpx; // 文本缩进
						white-space: nowrap;
					}
					
					.item-grid {
						float: left;
						width: 96%;
						height: 190rpx;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
						margin-left: 2%;
						background: #fff;
						border-radius: 15rpx;
						
						.left {
							float: left;
							width: 69%;
							height: 190rpx;
							font-size: 30rpx;
							text-align: left;
							text-indent: 30rpx;
							color: #53acff;
							line-height: 60rpx;
							padding-left: 1%;
						}
						
						.right {
							float: left;
							width: 29%;
							height: 190rpx;
							font-size: 30rpx;
							text-align: left;
							text-indent: 30rpx;
							color: #53acff;
							line-height: 60rpx;
							padding-left: 1%;
						}
					}
				}
			}

			.reBtn {
				position: fixed;
				right: 90rpx;
				bottom: 150rpx;
				width: 100rpx;
				height: 100rpx;
				color: #ffffff;
				background: #3c9cff;
				border-radius: 50rpx 50rpx 50rpx 50rpx;

				.bBtn {
					width: 100rpx;
					height: 50rpx;
					border: none;
					border-radius: 50rpx 50rpx 0 0;

					.icon {
						width: 50rpx;
						height: 50rpx;
						padding-left: 25rpx;
						padding-right: 25rpx;
					}
				}

				.bText {
					width: 100rpx;
					height: 50rpx;
					font-size: 18rpx;
					text-align: center;
					border-radius: 0 0 50rpx 50rpx;
				}
			}

			.reBtn-active {
				background: #2e7ac6;
			}
		}
	}
</style>